<template>
	<view class="page">
		<view style="">
			<view class='top-container'>
				<image class='bg-img' src='../../../static/img/bg_login.png'></image>
				<view bindtap='logout' class='logout' hover-class="opcity" hover-stay-time="150">
				</view>
				<view v-if="!isLogin" class='user-wrapper'>
					<navigator url='../login/login' hover-class="opcity" hover-stay-time="150" class='user'>
						<image class='avatar-img' src='../../../static/img/my/mine_def_touxiang_3x.png'></image>
						<text class='user-info-mobile'>请登录</text>
					</navigator>
				</view>
				<view v-if="isLogin" class='user'>
					<image class='avatar-img' src='../../../static/img/my/mine_def_touxiang_3x.png'></image>
					<view class='user-info-mobile'>
						<text>{{username}}</text>
					</view>
				</view>
			</view>

			<view class='middle-container flex'>
				<view @tap="onProfile()" class='middle-item' hover-class="opcity" hover-stay-time="150">
					<image class='farm-img' src='../../../static/img/my/user.png'></image>
					<text class='middle-tag text-gray'>个人信息</text>
				</view>
				<view @tap="onLogout()" class='middle-item' hover-class="opcity" hover-stay-time="150">
					<image class='exit-img' src='../../../static/img/my/exit.png'></image>
					<text class='middle-tag text-gray'>切换账号</text>
				</view>
			</view>

			<view class="margin radius " style="background-color: rgba(200, 200, 200, 0.1);">
				<view class="cu-list grid col-3">
					<view class="cu-item" @tap="onAlarm()" hover-class="opcity" hover-stay-time="150">
						<view class="cuIcon-mail text-grey">
							<view v-if="alarm>0" class="cu-tag badge">
								<block v-if="alarm>0 && alarm<100">{{alarm}}</block>
								<block v-if="alarm>100">99+</block>
							</view>
						</view>
						<text class="padding-top-xs">告警通知</text>
					</view>

					<!-- <view class="cu-item" @tap="openManual()" hover-class="opcity" hover-stay-time="150">
						<view class="cuIcon-read text-grey">
						</view>
						<text class="padding-top-xs">使用教程</text>
					</view> -->

					<view class="cu-item" @tap="openProtocol()" hover-class="opcity" hover-stay-time="150">
						<view class="cuIcon-newshot text-grey">
						</view>
						<text class="padding-top-xs">用户协议</text>
					</view>

					<view class="cu-item" @tap="checkVersion()" hover-class="opcity" hover-stay-time="150">
						<view class="cuIcon-pullup text-grey">
						</view>
						<text class="padding-top-xs">检查更新</text>
					</view>

				</view>
			</view>

			<view class="footer flex justify-center">
				<!-- <view class="">
					<navigator url="https://www.hozenn.com/" class="text-olive text-sm text-center">浩正官网</navigator>
				</view> -->
				<view @tap="checkVersion()" class=" padding-xs text-center text-grey text-sm" hover-class="opcity"
					hover-stay-time="150">版本号:{{version}}</view>
			</view>
		</view>


	</view>

</template>

<script>
	import * as api from '../../../common/api.js';
	export default {
		data() {
			return {
				title: 'Hello',
				isLogin: false,
				username: '',
				userinfo: {},
				version: "",
				alarm:0,
			}
		},
		onShow: function() {
			try {
				const value = uni.getStorageSync('userinfo');
				if (value) {
					//console.log(value);
					this.userinfo = JSON.parse(value)
					this.isLogin = true
					this.username = this.userinfo.name
				}
			} catch (e) {
				// error
				this.isLogin = false
				this.username = ''
			}
			
			this.loadHappenAlarm()

		},
		onLoad() {
			getApp().getUserInfo()

			var that = this
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, function(appInfo) {
				console.info(appInfo)
				that.version = appInfo.version
			})
			// #endif

			// #ifdef H5
			const appInfo = uni.getAppBaseInfo()
			console.info(appInfo)
			that.version = appInfo.appVersion
			// #endif

		},
		methods: {
			//检查版本更新情况
			checkVersion() {
				var that = this
				//模拟接口获取最新版本号，版本号固定为整数
				getApp().getRemoteVer().then(function(res) {
					console.info(res)
					if (res.code >= 0) {

						//#ifdef H5
						//浏览器调试模式下
						const appInfo = uni.getAppBaseInfo()
						console.info(appInfo)
						const selfVersionCode = Number(appInfo.appVersionCode) //当前App版本号
						const remoteVersionCode = Number(res.data.versionCode)
						const remoteVersionName = res.data.versionName
						console.info("selfVersionCode:", selfVersionCode, "remoteVersionCode:", remoteVersionCode)
						//线上版本号高于当前，进行在线升级
						if (selfVersionCode < remoteVersionCode) {
							console.info("find update!")
							let platform = uni.getSystemInfoSync().platform //手机平台
							console.info("platform", platform)
							//安卓手机弹窗升级
							if (platform === 'android') {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/upgrade/upgrade?man_check=1'
									})
								}, 500);

							} //IOS无法在线升级提示到商店下载
							else {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/upgrade/upgrade?man_check=1'
									})
								}, 500);
							}
						} else {
							//无更新
							uni.showToast({
								title: '当前已经是最新版本',
								icon: 'none'
							})
						}
						// #endif


						// #ifdef APP-PLUS
						//真机模式下
						plus.runtime.getProperty(plus.runtime.appid, function(appInfo) {
							console.log("云打包，安心打包方式获取设备信息:");
							console.info(appInfo)
							const selfVersionCode = Number(appInfo.versionCode) //当前App版本号
							const remoteVersionCode = Number(res.data.versionCode)
							const remoteVersionName = res.data.versionName
							console.info("selfVersionCode:", selfVersionCode,
								"remoteVersionCode:", remoteVersionCode)
							//线上版本号高于当前，进行在线升级
							if (selfVersionCode < remoteVersionCode) {
								console.info("find update!")
								let platform = uni.getSystemInfoSync().platform //手机平台
								//安卓手机弹窗升级
								if (platform === 'android') {
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/upgrade/upgrade'
										})
									}, 500);

								} //IOS无法在线升级提示到商店下载
								else {
									uni.showModal({
										title: '发现新版本:' + remoteVersionName,
										content: '请到AppStore进行升级',
										showCancel: false
									})
								}
							} else {
								//无更新
								uni.showToast({
									title: '当前已经是最新版本',
									icon: 'none'
								})
							}
						});
						// #endif




					} else {

					}
				})
			},
			onLogout() {
				uni.showModal({
					title: '提示',
					content: '确认要退出当前用户账号?',
					success: function(res) {
						if (res.confirm) {
							try {
								uni.clearStorageSync()
								uni.$emit('logout', {
									msg: 'logout...'
								})
							} catch (e) {
								// error
							}
							console.info("注销账号")
							setTimeout(function() {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							}, 50)
						} else if (res.cancel) {}
					}
				});

			},
			openProtocol() {
				uni.navigateTo({
					url: "/pages/protocol/protocol"
				})
				// uni.downloadFile({
				// 	url: 'https://example.com/somefile.pdf',
				// 	success: function(res) {
				// 		var filePath = res.tempFilePath;
				// 		uni.openDocument({
				// 			filePath: filePath,
				// 			showMenu: true,
				// 			success: function(res) {
				// 				console.log('打开文档成功');
				// 			}
				// 		});
				// 	}
				// });
			},
			openManual(){
				// uni.showToast({
				// 	title: '即将上线视频教程,尽情期待',
				// 	icon: 'none'
				// })
				uni.navigateTo({
					url: "/pages/manual/manual"
				})
			},
			onProfile(){
				uni.navigateTo({
					url: "/pages/profile/profile"
				})
			},
			onAlarm() {
				uni.navigateTo({
					url: "/pages/alarm/alarm?farmname=&farmid=&housename=&houseid="
				})
			},
			loadHappenAlarm() {
				var that = this
				var token = getApp().getToken()

				api.myRequest({
					url: '/Api/Alarm/Happen/Num',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + token + ''
					},
					data: {},
				}, false).then(res => {
					if (res.code >= 0) {
						that.alarm = res.data
					} else {
			
					}
				}).catch(err => {
					that.loading = false
					console.log(err)
				})
			},
		}
	}
</script>

<style>
	.page {
		background-color: transparent;
		/* height: 100vh; */
	}

	button::after {
		border: none;
	}

	.opcity {
		opacity: 0.5;
	}

	.top-container {
		height: 500rpx;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.bg-img {
		position: absolute;
		width: 100%;
		height: 440rpx;
		z-index: 1;
		opacity: 0.5;
	}

	.logout {
		width: 110rpx;
		height: 36rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 42rpx 0 24rpx 32rpx;
	}

	.logout-img {
		width: 36rpx;
		height: 36rpx;
		margin-right: 11rpx;
	}

	.logout-txt {
		font-size: 28rpx;
		color: #FEFEFE;
		line-height: 28rpx;
	}

	.user-wrapper {
		display: flex;
		justify-content: center;
	}

	.user {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.avatar-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		align-self: center;
	}

	.user-info {
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
		align-items: center;
	}

	.user-info-mobile {
		margin-top: 30rpx;
		position: relative;
		font-size: 28rpx;
		color: #333;
		line-height: 28rpx;
		align-self: center;
		padding: 0 50rpx;
	}

	.edit-img {
		position: absolute;
		width: 42rpx;
		height: 42rpx;
		right: 0;
		bottom: -4rpx;
	}

	.edit-img>image {
		width: 42rpx;
		height: 42rpx;
		padding-left: 25rpx;
	}

	.middle-container {
		height: 60px;
		display: flex;
		flex-direction: row;
		align-items: center;
		/* border-radius: 20rpx; */
		/* background-color: rgba(200, 200, 200, 0.1); */
		margin: -30rpx 30rpx 26rpx 30rpx;
		/* box-shadow: 0 15rpx 10rpx -15rpx #3b3d4e; */
		color: azure;
	}

	.middle-item {
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.farm-img {
		width: 50rpx;
		height: 50rpx;
		margin-left: 80rpx;
	}

	.middle-tag {
		font-size: 28rpx;
		/* color: #FEFEFE; */
		line-height: 28rpx;
		font-weight: bold;
		padding-left: 22rpx;
	}

	.exit-img {
		width: 45rpx;
		height: 45rpx;
		margin-left: 200rpx;
	}

	.bottom-container {
		height: 320rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 40rpx 74rpx 40rpx 95rpx;
		margin: 0 30rpx;
		background-color: rgba(200, 200, 200, 0.1);
		border-radius: 10rpx;
		box-sizing: border-box;
		box-shadow: 0 0 10rpx #3b3d4e
	}

	.ul-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.item-img {
		width: 54rpx;
		height: 54rpx;
	}

	.item-name {
		padding-top: 13rpx;
		font-size: 24rpx;
		/* color: #666666; */
		min-width: 80rpx;
		text-align: center;
	}

	.btn-feedback {
		background: transparent !important;
		position: absolute;
		height: 100%;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 99999;
	}

	.cu-list.grid {
		background-color: transparent !important;
		text-align: center;
	}

	.cu-list.grid>.cu-item uni-text {
		color: #333;
	}

	/* 作为展示用的样式 */
	.footer {
		position: absolute;
		bottom: 5px;
		width: 100%;
	}
</style>